<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <label for="selProvince">请选择您的省份：</label>
  <select  id="selProvince"></select>

  <script>
    // 你无须知道该函数是如何实现的！！！
    // 调用该函数，会远程加载省份数据
    // 函数返回一个Promise，成功后得到省份数组，失败时会给予失败原因
    function getProvinces() {
      return fetch('https://study.duyiedu.com/api/citylist')
        .then((resp) => resp.json())
        .then((resp) => resp.data)
        .then((resp) =>
          resp.map((it) => ({ value: it.value, label: it.label }))
        );
    }

    // 利用getProvinces函数，将省份数据加载到select元素中
    getProvinces().then(res => {
      const select = document.querySelector("#selProvince")
      for (const data of res) {
        select.innerHTML += `<option value="${data.value}">${data.label}</option>`
      }
    })

  </script>
</body>

</html>